import { OverlayDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Overlay);

## Usage

`Overlay` takes 100% of width and height of parent container or viewport if `fixed` prop is set.
Set `color` and `backgroundOpacity` props to change `Overlay` background-color. Note that `backgroundOpacity` prop
does not change CSS opacity property, it changes background-color. For example, if you set
`color="#000"` and `backgroundOpacity={0.85}` background-color will be `rgba(0, 0, 0, 0.85)`:

<Demo data={OverlayDemos.usage} />

## Gradient

Set `gradient` prop to use background-image instead of background-color. When `gradient` prop is set,
`color` and `backgroundOpacity` props are ignored.

<Demo data={OverlayDemos.gradient} />

## Blur

Set `blur` prop to add `backdrop-filter: blur({value})` styles.
Note that `backdrop-filter` [is not supported in all browsers](https://caniuse.com/css-backdrop-filter).

<Demo data={OverlayDemos.blur} />

<Polymorphic
  defaultElement="div"
  changeToElement="a"
  component="Overlay"
  withNext
/>
